import './StartTopConfig.scss'

import dayjs from 'dayjs'
import { Tooltip } from 'antd'
import { useState } from 'react'
import { useRafInterval } from 'ahooks'

import { useNavigate } from 'react-router-dom'


import { ColorCallBack } from '../../Utils'
import { MappingData } from '../../Config/MappingData'
import { ICONMapping } from '../../Config/IconMapping'
import StartNavConfig from './StartNavConfig'


const DateTime = ({ style, format }) => {
    const [Date, setData] = useState()
    useRafInterval(() => setData(dayjs().format(format)), 1000)
    return <div style={style}>{Date}</div>
}

const StartTopConfig = ({ topConfig, PageStatus, children }) => {
    const Navigate = useNavigate()
    const { top_heigth, top_paddingX, top_paddingY, top_color, top_template } = topConfig
    const styleConfig = { height: top_heigth, background: top_color, padding: `${top_paddingY}px ${top_paddingX}px` }

    return (
        <div className='StartTopConfig' style={styleConfig}>
            {top_template?.map((item, index) => {
                const { top_temp_flex, top_temp_pdt, top_temp_color, top_temp_judge, top_temp_type } = item
                const tempStyle = { flex: top_temp_flex, paddingTop: top_temp_pdt, background: top_temp_color }

                // !!! 空模块
                if (top_temp_type === 'empty' && (top_temp_judge === 'all' || top_temp_judge === PageStatus)) {
                    return <div key={index} style={tempStyle} className='TitleEmpty' />
                }

                // !!! 标题模块
                if (top_temp_type === 'title' && (top_temp_judge === 'all' || top_temp_judge === PageStatus)) {
                    const {
                        temp_title_icon, temp_title_icon_PL, temp_title_icon_PR,
                        temp_title_icon_ShadowB, temp_title_icon_ShadowS, temp_title_icon_ShadowX, temp_title_icon_ShadowY,
                        temp_title_icon_url, temp_title_icon_width, temp_title_icon_height,
                        temp_title_text_fill, temp_title_text_deg, temp_title_text_fontFamily, temp_title_text_fontSize,
                        temp_title_text, temp_title_text_fontStyle, temp_title_text_fontWeight, top_temp_flexJu,
                        temp_title_text_shadowBlur, temp_title_text_shadowColor, temp_title_text_shadowOffsetX, temp_title_text_shadowOffsetY
                    } = item

                    const iconStyle = {
                        width: temp_title_icon_width,
                        height: temp_title_icon_height,
                        margin: `0 ${temp_title_icon_PR}px 0 ${temp_title_icon_PL}px `,
                        filter: `drop-shadow(${temp_title_icon_ShadowX}px ${temp_title_icon_ShadowY}px ${temp_title_icon_ShadowS}px ${temp_title_icon_ShadowB})`
                    }

                    const textStyle = {
                        height: temp_title_text_fontSize,
                        lineHeight: temp_title_text_fontSize + 'px',
                        background: ColorCallBack(temp_title_text_fill, temp_title_text_deg),
                        fontFamily: temp_title_text_fontFamily,
                        fontSize: temp_title_text_fontSize,
                        fontStyle: temp_title_text_fontStyle,
                        fontWeight: temp_title_text_fontWeight,
                        filter: `drop-shadow(${temp_title_text_shadowOffsetX}px ${temp_title_text_shadowOffsetY}px ${temp_title_text_shadowBlur}px ${temp_title_text_shadowColor})`,
                    }
                    return (
                        <div key={index} style={{ ...tempStyle, justifyContent: top_temp_flexJu }} className='TitleTemp'>
                            {temp_title_icon && <img style={iconStyle} src={temp_title_icon_url} alt="" />}
                            <div style={textStyle}>{temp_title_text || '暂无'}</div>
                        </div>
                    )
                }

                // !!! 操作模块
                if (top_temp_type === 'option' && (top_temp_judge === 'all' || top_temp_judge === PageStatus)) {
                    const { temp_options_list, temp_options_font, temp_options_width, temp_options_height,
                        temp_options_margin, temp_options_back, temp_options_back_hover, temp_options_radius,
                        temp_options_icon_size, temp_options_icon_color, temp_options_icon_hover, temp_options_icon_margin,
                        temp_options_icon_ShadowX, temp_options_icon_ShadowY, temp_options_icon_ShadowS, temp_options_icon_ShadowB,
                        temp_option_text_fill, temp_option_text_hover, temp_option_text_fontSize, temp_option_text_fontFamily,
                        temp_option_text_fontWeight, temp_option_text_fontStyle,
                        temp_option_text_shadowX, temp_option_text_shadowY, temp_option_text_shadowB, temp_option_text_shadowC
                    } = item

                    const divStyle = {
                        width: temp_options_width,
                        height: temp_options_height,
                        margin: `0 ${temp_options_margin}px`,
                        background: temp_options_back,
                        borderRadius: temp_options_radius,
                        '--hoverBack': temp_options_back_hover,
                        '--hoverIcon': temp_options_icon_hover,
                        '--hoverText': temp_option_text_hover
                    }

                    const iconStyle = {
                        fontSize: temp_options_icon_size,
                        color: temp_options_icon_color,
                        marginRight: temp_options_icon_margin,
                        filter: `drop-shadow(${temp_options_icon_ShadowX}px ${temp_options_icon_ShadowY}px ${temp_options_icon_ShadowS}px ${temp_options_icon_ShadowB})`,
                    }

                    const textStyle = {
                        color: temp_option_text_fill,
                        height: temp_option_text_fontSize,
                        lineHeight: temp_option_text_fontSize + 'px',
                        fontSize: temp_option_text_fontSize,
                        fontFamily: temp_option_text_fontFamily,
                        fontStyle: temp_option_text_fontStyle,
                        fontWeight: temp_option_text_fontWeight,
                        filter: `drop-shadow(${temp_option_text_shadowX}px ${temp_option_text_shadowY}px ${temp_option_text_shadowB}px ${temp_option_text_shadowC})`,
                    }

                    const arr = temp_options_list.map(item => MappingData.Theme__StartOptions.find(v => v.value === item))


                    const onClickNav = e => {
                        switch (e) {
                            case 1:
                                Navigate('/Start')
                                break;
                            case 2:
                                Navigate('/Admin')
                                break;
                            case 3:
                                Navigate('/')
                                break;
                            case 4:
                                console.log('智能AI')
                                break;
                            default:
                                break;
                        }
                    }

                    return (
                        <div key={index} style={tempStyle} className='TitleOptions'>
                            {arr.map(item => {
                                const { value, label, icon } = item
                                if (value === 1 && PageStatus === 'home') return null
                                return (
                                    <Tooltip key={value} title={label} placement="bottom">
                                        <div key={value} style={divStyle} onClick={() => onClickNav(value)}>
                                            <div style={iconStyle}>{ICONMapping[icon]}</div>
                                            {temp_options_font && <div style={textStyle}>{label}</div>}
                                        </div>
                                    </Tooltip>
                                )
                            })}
                        </div>
                    )
                }

                // !!! 文字模块
                if (top_temp_type === 'text' && (top_temp_judge === 'all' || top_temp_judge === PageStatus)) {
                    const { temp_text_flex, temp_text_input, temp_text_fill, temp_text_deg, temp_text_hover, temp_text_hoverDeg,
                        temp_text_fontSize, temp_text_fontFamily, temp_text_fontWeight, temp_text_fontStyle,
                        temp_text_shadowX, temp_text_shadowY, temp_text_shadowB, temp_text_shadowC
                    } = item

                    const textStyle = {
                        background: ColorCallBack(temp_text_fill, temp_text_deg),
                        height: temp_text_fontSize,
                        lineHeight: temp_text_fontSize + 'px',
                        fontSize: temp_text_fontSize,
                        fontFamily: temp_text_fontFamily,
                        fontStyle: temp_text_fontStyle,
                        fontWeight: temp_text_fontWeight,
                        filter: `drop-shadow(${temp_text_shadowX}px ${temp_text_shadowY}px ${temp_text_shadowB}px ${temp_text_shadowC})`,
                        '--content': temp_text_flex,
                        '--hoverText': ColorCallBack(temp_text_hover, temp_text_hoverDeg)
                    }
                    return (
                        <div key={index} style={tempStyle} className='TitleText'>
                            <div style={textStyle}>{temp_text_input}</div>
                        </div>
                    )
                }

                // !!! 返回模块
                if (top_temp_type === 'back' && (top_temp_judge === 'all' || top_temp_judge === PageStatus)) {
                    const { temp_back_icon, temp_back_icon_fill, temp_back_icon_hover, temp_back_icon_size, temp_back_icon_url,
                        temp_back_icon_shadowB, temp_back_icon_shadowC, temp_back_icon_shadowX, temp_back_icon_shadowY,
                        temp_back_text, temp_back_text_cont, temp_back_text_fill, temp_back_text_deg, temp_back_text_hover, temp_back_text_hoverDeg,
                        temp_back_text_fontFamily, temp_back_text_fontSize, temp_back_text_fontStyle, temp_back_text_fontWeight,
                        temp_back_text_shadowB, temp_back_text_shadowC, temp_back_text_shadowX, temp_back_text_shadowY
                    } = item

                    const iconStyle = {
                        fontSize: temp_back_icon_size,
                        color: temp_back_icon_fill,
                        filter: `drop-shadow(${temp_back_icon_shadowX}px ${temp_back_icon_shadowY}px ${temp_back_icon_shadowB}px ${temp_back_icon_shadowC})`,
                        '--hoverIcon': temp_back_icon_hover,
                    }

                    const textStyle = {
                        background: ColorCallBack(temp_back_text_fill, temp_back_text_deg),
                        height: temp_back_text_fontSize,
                        lineHeight: temp_back_text_fontSize + 'px',
                        fontSize: temp_back_text_fontSize,
                        fontFamily: temp_back_text_fontFamily,
                        fontStyle: temp_back_text_fontStyle,
                        fontWeight: temp_back_text_fontWeight,
                        filter: `drop-shadow(${temp_back_text_shadowX}px ${temp_back_text_shadowY}px ${temp_back_text_shadowB}px ${temp_back_text_shadowC})`,
                        '--hoverText': ColorCallBack(temp_back_text_hover, temp_back_text_hoverDeg)
                    }

                    const onBack = () => {
                        Navigate('/Start')
                    }

                    return (
                        <div key={index} style={tempStyle} className='TitleBack'>
                            {PageStatus !== 'home' &&
                                <div onClick={onBack}>
                                    {temp_back_icon && <div className='icon' style={iconStyle}>{ICONMapping[temp_back_icon_url]}</div>}
                                    {temp_back_text && <div className='text' style={textStyle}>{temp_back_text_cont}</div>}
                                </div>
                            }
                        </div>
                    )
                }

                // !!! 导航模块
                if (top_temp_type === 'nav' && (top_temp_judge === 'all' || top_temp_judge === PageStatus)) {
                    return <div key={index} style={tempStyle} className='TitleNav'> {children}</div>
                }
                // !!! 时间模块
                if (top_temp_type === 'date' && (top_temp_judge === 'all' || top_temp_judge === PageStatus)) {
                    const { temp_data_list, temp_date_alignItems, temp_date_justifyContent, temp_date_alignContent, temp_date_flexDirection } = item
                    const style = {
                        '--alignItems': temp_date_alignItems,
                        '--justifyContent': temp_date_justifyContent,
                        '--alignContent': temp_date_alignContent,
                        '--flexDirection': temp_date_flexDirection,
                    }
                    return (
                        <div key={index} style={{ ...tempStyle, ...style }} className='TitleDate'>
                            {temp_data_list && temp_data_list.map((item, key) => {
                                const { format, marginTB, marginLR, fill, deg, hover, hoverDeg, fontSize,
                                    fontFamily, fontWeight, fontStyle, shadowX, shadowY, shadowB, shadowC } = item
                                const style = {
                                    margin: `${marginTB}px ${marginLR}px`,
                                    background: ColorCallBack(fill, deg),
                                    '--hoverBack': ColorCallBack(hover, hoverDeg),
                                    height: fontSize,
                                    lineHeight: fontSize + 'px',
                                    fontSize: fontSize,
                                    fontFamily: fontFamily,
                                    fontStyle: fontStyle,
                                    fontWeight: fontWeight,
                                    filter: `drop-shadow(${shadowX}px ${shadowY}px ${shadowB}px ${shadowC})`,
                                }
                                return <DateTime key={key} style={style} format={format} />
                            })}
                        </div>
                    )
                }
            })}
        </div>
    )

}

export default StartTopConfig;